
<template>
  <el-container class="home_container">

    <!-- header -->
    <el-header class="el-header">
      <div>
        <h1>{{ obj.title }}</h1>
      </div>

      <div class="toolbar">
        <!-- <edit style="width: 3em; height: 2em; margin-right: 18px" /> -->
        <el-dropdown>
          <el-icon>
            <el-icon>
              <IconMenu />
            </el-icon>
          </el-icon>
          <span>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; </span>
          <template #dropdown>
            <el-dropdown-menu>
              <!--如果没有显示出来 ,就是 局部导入的问题 -->
              <el-dropdown-item @click="logout">
                <el-icon><Avatar /></el-icon>
                退出
              </el-dropdown-item>

            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <span>
          <el-avatar :size="30">
            <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          </el-avatar>
        </span>
      </div>

    </el-header>


    <!--container  -->
    <el-container class="maincontainer">
      <!-- <el-aside  width="200px"> -->
      <!--左侧的menu菜单栏 单独用一个navmenu 组件来处理 </el-aside> 在里面 -->
      <navMenu />
      <!-- </el-aside> -->

      <el-main>
        <router-view />
      </el-main>

      <!-- <el-footer>Footer</el-footer> -->


    </el-container>


  </el-container>
</template>

<script setup>
// import NavMenu from '.navmenu.vue'
import { useRouter } from 'vue-router'               //引入 路由

// import { send_mail } from '../api'
import { ref, reactive } from 'vue'
//导入部分icon的图标
import { Menu as IconMenu, Setting, Avatar, Share } from '@element-plus/icons-vue'
// import router from '../router'
import { ElMessage } from 'element-plus'
const obj = reactive({ "title": "综合管理后台系统" })

const router = useRouter();                  //实例化

function logout() {
  ElMessage({
    message: '退出成功 !',
    type: 'success',
  })
  window.sessionStorage.clear()       //清理掉sessionstorge中的token 
  //跳转到login登录页面
  router.push("/login")

}

</script>



<style lang = "less" scoped>
//最外层的容器 高度 100%  
.home_container {
  height: 100%;
}

.el-header {
  text-align: center;
  font-size: 10px;
  position: relative;
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
}

.el-aside {
  background-color: #333744;
}

.el-main {
  background-color: aliceblue;
}

// .layout-container-demo .el-aside {
//   width: 200px;
//   color: var(--el-text-color-primary);
//   /*background: #fff !important;*/
//   background-color: #b3c0d1;
//   border-right: solid 1px #e6e6e6;
//   box-sizing: border-box;

// }

// .layout-container-demo .el-menu {
//   border-right: none;
// }

// .layout-container-demo .el-main {
//   padding: 0;
// }

.toolbar {
  position: absolute;
  display: inline-flex;
  align-items: center;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.maincontainer {
  height: 100%;
}

.toggle-button {
  background-color: aliceblue;
}
</style>
